<template>
  <ele-modal
    :width="1150"
    v-model:visible="visible"
    :confirm-loading="loading"
    :title="'货品详情'"
    :body-style="{ paddingBottom: '38px' }"
    @update:visible="updateVisible"
    :footer="null"
  >
    <a-form
      class="margin-y-15"
      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="24" :sm="24" :xs="24">
          <table cellpadding="0" cellspacing="0" class="recepit_table">
            <tbody>
              <tr
                ><td
                  class="fw-bolder"
                  colspan="8"
                  style="background-color: #f5f5f5"
                  >货品详情</td
                ></tr
              >
              <tr v-for="(item, index) in goods" :key="index">
                <td v-if="item[0] && item[0].name">{{ item[0].name }}</td>
                <td :class="{ mohu: item[0].do_secret == 1 }">
                  <template
                    v-if="
                      item[0].column_type == 'select' ||
                      item[0].column_type == 'selectajax' ||
                      item[0].column_type == 'selectajaxlike'
                    "
                  >
                    {{ item[0].value_name || '' }}
                  </template>
                  <template v-else>
                    {{ item[0].value || '' }}
                  </template>
                </td>
                <td v-if="item[1] && item[1].name">{{ item[1].name }}</td>
                <td :class="{ mohu: item[1].do_secret == 1 }">
                  <template
                    v-if="
                      item[1].column_type == 'select' ||
                      item[1].column_type == 'selectajax' ||
                      item[1].column_type == 'selectajaxlike'
                    "
                  >
                    {{ item[1].value_name || '' }}
                  </template>
                  <template v-else>
                    {{ item[1].value || '' }}
                  </template>
                </td>
                <td v-if="item[2] && item[2].name">{{ item[2].name }}</td>
                <td :class="{ mohu: item[2].do_secret == 1 }" v-if="item[2]">
                  <template
                    v-if="
                      item[2].column_type == 'select' ||
                      item[2].column_type == 'selectajax' ||
                      item[2].column_type == 'selectajaxlike'
                    "
                  >
                    {{ item[2].value_name || '' }}
                  </template>
                  <template v-else>
                    {{ item[2].value || '' }}
                  </template>
                </td>
                <template v-if="index == 0">
                  <td v-if="item[3] && item[3].name">{{
                    item[3].name
                  }}</td>
                  <td
                    :class="{ mohu: item[3].do_secret == 1 }"
                    v-if="item[3]"
                  >
                    <template
                      v-if="
                        item[3].column_type == 'select' ||
                        item[3].column_type == 'selectajax' ||
                        item[3].column_type == 'selectajaxlike'
                      "
                    >
                      {{ item[3].value_name }}
                    </template>
                    <template v-else-if="item[3].column_type == 'image'">
                      <a-image
                        :width="40"
                        :src="item[3].value"
                        :preview="{
                          src: `${item[3].value}`
                        }"
                      />
                    </template>
                    <template v-else>
                      {{ item[3].value }}
                    </template>
                  </td>
                </template>
                <template v-if="index != 0">
                  <td v-if="item[3] && item[3].name">{{ item[3].name }}</td>
                  <td :class="{ mohu: item[3].do_secret == 1 }" v-if="item[3]">
                    <template
                      v-if="
                        item[3].column_type == 'select' ||
                        item[3].column_type == 'selectajax' ||
                        item[3].column_type == 'selectajaxlike'
                      "
                    >
                      {{ item[3].value_name }}
                    </template>
                    <template v-else-if="item[3].column_type == 'image'">
                      <a-image
                        :width="40"
                        :src="item[3].value"
                        :preview="{
                          src: `${item[3].value}`
                        }"
                      />
                    </template>
                    <template v-else>
                      {{ item[3].value }}
                    </template>
                  </td>
                </template>
              </tr>
            </tbody>
          </table>
          <div>
            <div class="fs-16 fw-bolder margin-y-15">主石信息</div>
            <div>
              <vxe-table
                border
                show-overflow
                :column-config="{ resizable: true }"
                :loading="mainStone.loading"
                :data="mainStone.tableData"
              >
                <vxe-column type="seq" title="NO" width="60" fixed="left" />
                <vxe-column
                  :field="item.column"
                  :title="item.name"
                  width="150"
                  v-for="(item, index) in mainStone.tableColumn"
                  :key="index"
                />
              </vxe-table>
            </div>
          </div>
          <div>
            <div class="fs-16 fw-bolder margin-y-15">副石信息</div>
            <div>
              <vxe-table
                border
                show-overflow
                :column-config="{ resizable: true }"
                :loading="viceStone.loading"
                :data="viceStone.tableData"
              >
                <vxe-column type="seq" title="NO" width="60" fixed="left" />
                <vxe-column
                  :field="item.column"
                  :title="item.name"
                  width="150"
                  v-for="(item, index) in viceStone.tableColumn"
                  :key="index"
                />
              </vxe-table>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted, watch, defineProps } from 'vue';
  import { goods_info } from '@/api/jewelry/goods_info';

  const props = defineProps({
    visible: Boolean,
    goods_code: String,
    goods_category_code: String
  });
  const emit = defineEmits(['update:visible']);

  const loading = ref(false);
  const goods = ref([]);
  const thumb_url = ref(null);
  const mainStone = ref({
    loading: false,
    tableColumn: [],
    tableData: []
  });
  const viceStone = ref({
    loading: false,
    tableColumn: [],
    tableData: []
  });
  const query = reactive({
    goods_category_code: 'GC639210',
    goods_code: ''
  });

  onMounted(() => {
    query.goods_code = props.goods_code;
    getDetail();
  });
  const getDetail = () => {
    goods_info({ code: query.goods_code }).then(async (res) => {
      res.sku_info.forEach((item, index) => {
        if (item.column_type == 'image') {
          item.value = res.thumb_url ? res.thumb_url : '';
        }
      });
      thumb_url.value = res.thumb_url ? res.thumb_url : '';
      mainStone.value.tableColumn = res.master_gem.column;
      mainStone.value.tableData = res.master_gem.row_list;
      viceStone.value.tableColumn = res.vice_gem.column;
      viceStone.value.tableData = res.vice_gem.row_list;
      goods.value = await getArray(res.sku_info, 4);
    });
  };

  const getArray = async (arr, size) => {
    let imgObj = {};
    let newArr = [];
    await arr.forEach((item) => {
      if (item.column_type == 'image') {
        imgObj = item;
      } else {
        newArr.push(item);
      }
    });
	await newArr.splice(3, 0, imgObj);
    // arr是一维数组 size是二维数组包含几条数据
    var arr2 = [];
    for (var i = 0; i < newArr.length; i = i + size) {
      /* if (i == 0) {
        arr2.push(newArr.slice(0, 3));
      } else if (i == 4) {
        arr2.push(newArr.slice(3, 6));
      } else {
        arr2.push(newArr.slice(i, i + size));
      } */
	  arr2.push(newArr.slice(i, i + size));
    }
    return arr2; // 新的二维数组
  };

  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>

<style></style>
